<template>
	<div class="category-content order-content">
		<div class="main-width">
			<div class="order-number">订单编号：{{orderDetailData.orderSn}}</div>
			<div class="order-status">
				<ul>
					<li class="order-detail-one order-status-one order-status-default" :class="{'yiwancheng': statusActive.one}">
						<div class="order-current-status"></div>
						<div class="order-status-text">提交订单</div>
						<div class="order-status-time">{{createDate}}</div>
						<div class="order-status-time">{{createTime}}</div>
					</li>
					<li class="order-detail-two order-status-two order-status-default" :class="{'yiwancheng': statusActive.two}">
						<div class="order-current-status"></div>
						<div class="order-status-text">付款成功</div>
						<div class="order-status-time">{{payDate}}</div>
						<div class="order-status-time">{{payTime}}</div>
					</li>
					<li class="order-detail-three order-status-two order-status-default" :class="{'yiwancheng': statusActive.three}">
						<div class="order-current-status"></div>
						<div class="order-status-text">货商发货</div>
						<div class="order-status-time">{{sendGoodsDate}}</div>
						<div class="order-status-time">{{sendGoodsTime}}</div>
					</li>
					<li class="order-detail-four order-status-two order-status-default" :class="{'yiwancheng': statusActive.four}">
						<div class="order-current-status"></div>
						<div class="order-status-text">订单完成</div>
						<div class="order-status-time">{{completeDate}}</div>
						<div class="order-status-time">{{completeTime}}</div>
					</li>
				</ul>
			</div>
			<div class="order-content-wrap" v-if="isSendGoods">
				<div class="manage-config-info-title">物流信息</div>
				<div class="order-info-content">
					<div class="order-logistics-info">
						<div>
							物流公司：<span>{{logisticsInfo.company}}</span>
						</div>
						<div>
							收货方式：<span>普通快递</span>
						</div>
						<div>
							物流单号：<span>{{logisticsInfo.no}}</span>
						</div>
					</div>
					<div class="order-logistics-content">
						<div class="order-logistics-item-wrap" v-for="(item, index) in logisticsList">
							<div class="order-logistics-item" :class="{'current': index==0}">
								<span>{{item.datetime}}</span>
								<span>{{item.remark}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="order-content-wrap">
				<div class="manage-config-info-title">
					<div class="order-title-half">收货人信息</div>
					<div class="order-title-half">订单信息</div>
				</div>
				<div class="order-info-content order-all-info">
					<div class="order-linkman-info">
						<div>
							姓名：<span>{{orderDetailData.linkMan}}</span>
						</div>
						<div>
							电话：<span>{{orderDetailData.mobile}}</span>
						</div>
						<div>
							身份证号：<span>{{orderDetailData.idNumber}}</span>
						</div>
						<div>
							收货地址：<span>{{address}}</span>
						</div>
					</div>
					<div class="order-info">
						<div>
							父订单编号：<span>{{orderDetailData.orderObjectSn}}</span>
						</div>
						<div>
							订单编号：<span>{{orderDetailData.orderSn}}</span>
						</div>
						<div>
							交易个数：<span>{{orderDetailData.goodsCount}}</span>
						</div>
						<div>
							最终结算金额：<span>¥{{orderDetailData.totalCooperatePrice/100}}</span>
						</div>
						<div>
							发货门店：<span>{{orderDetailData.storeName}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="order-content-wrap">
				<table class="shelves-table">
					<thead>
						<tr>
							<th>商品信息</th>
							<th>SKU</th>
							<th>最终结算价</th>
							<th>数量</th>
							<th>是否开票</th>
							<th>运费</th>
						</tr>
					</thead>
					<tbody class="order-tbody">
						<tr class="order-table-item" v-for="(item, index) in goodsList">
							<td class="order-table-image">
								<div class="order-table-image-wrap">
									<img :src="imgAddress + item.navigateImg1" @error="error(1)"/>
								</div>
								<div>
									<div class="order-goods-name">{{item.goodName}}</div>
								</div>
							</td>
							<td>
								<div class="order-default-font">{{item.specName}}</div>
								<div class="order-default-font">SKU：{{item.productBn}}</div>
							</td>
							<td class="order-default-font">¥{{item.cooperatePrice/100}}</td>
							<td class="order-default-font">{{item.quantity}}</td>
							<td class="order-default-font" v-if="orderDetailData.isBill == 1">开发票</td>
							<td class="order-default-font" v-else>未开发票</td>
							<td class="order-default-font" :rowspan="goodsList.length" v-if="index==0">¥{{orderDetailData.freight/100}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>
<script>
	import store from '../store/index.js'
	import {orderDetailInfo, imgAddress} from '../config/interface.js'
	import {toast, imageError} from '../util/tool.js'
	import {fetch} from '../config/fetch.js'
	import router from '../router/index.js'

	export default{
		data(){
			return {
				userId: store.state.userId,
				orderId: 0,
				imgAddress: imgAddress,
				orderDetailData: {},
				statusActive: {
					one: true,
					two: false,
					three: false,
					four: false
				},
				logisticsInfo: {},
				address: '',
				goodsList: {},
				isSendGoods: false,
				statusText: '交易成功',
				createDate: '',
				createTime: '',
				payDate: '',
				payTime: '',
				sendGoodsDate: '',
				sendGoodsTime: '',
				completeDate: '',
				completeTime: '',
				logisticsList: {}
			}
		},
		created(){
			this.orderId = this.$route.query.orderId;
		},
		mounted(){
			this.init();
		},
		methods: {
			error(num){
				imageError(num, event);
			},
			init(){
				var data = {
					orderId: this.orderId,
					userId: this.userId
				};
				var url = orderDetailInfo;
				fetch(url, data)
				.then(res => {
					this.orderDetailData = res.data;
					if(this.orderDetailData.logisticsInfo != null){
						this.logisticsInfo = res.data.logisticsInfo;
						this.isSendGoods = true;
						var list = res.data.logisticsInfo.list;
						var arr = [];
						for(var i = 0; i < list.length; i++){
							arr.push(list[list.length - (i + 1)]);
						}
						this.logisticsList = arr;
					}
					
					this.address = this.orderDetailData.province + this.orderDetailData.city + this.orderDetailData.area + this.orderDetailData.street + this.orderDetailData.address;
					this.goodsList = res.data.listDetail;
					var orderStatus = res.data.status;
					if(orderStatus == 1){
						this.statusActive.one = true;
						this.statusActive.two = false;
						this.statusActive.three = false;
						this.statusActive.four = false;
					}else if(orderStatus == 2){
						this.statusActive.one = true;
						this.statusActive.two = true;
						this.statusActive.three = false;
						this.statusActive.four = false;
					}else if(orderStatus == 3){
						this.statusActive.one = true;
						this.statusActive.two = true;
						this.statusActive.three = true;
						this.statusActive.four = false;
					}else{
						this.statusActive.one = true;
						this.statusActive.two = true;
						this.statusActive.three = true;
						this.statusActive.four = true;
						if(orderStatus == 7){
							this.statusText = "交易失败";
						}
					}
					if(this.orderDetailData.createTime != null){
						this.createDate = this.orderDetailData.createTime.substring(0,10);
						this.createTime = this.orderDetailData.createTime.substring(11,19);
					}
					if(this.orderDetailData.payTime != null){
						this.payDate = this.orderDetailData.payTime.substring(0,10);
						this.payTime = this.orderDetailData.payTime.substring(11,19);
					}
					if(this.orderDetailData.sendGoodsTime != null){
						this.sendGoodsDate = this.orderDetailData.sendGoodsTime.substring(0,10);
						this.sendGoodsTime = this.orderDetailData.sendGoodsTime.substring(11,19);
					}
					if(this.orderDetailData.completeTime != null){
						this.completeDate = this.orderDetailData.completeTime.substring(0,10);
						this.completeTime = this.orderDetailData.completeTime.substring(11,19);
					}
				})
			}
		}
	}
</script>